<template>
  <!--  <Header> 分为三部分 左 中 右 左边是图标 中间input输入框  右边是客户咨询按钮-->
  <header class="clearfix">
    <h1><img
        src="../../assets/images/logo.png"
        alt="V6T的LOGO"
      ></h1>
    <div
      class="search"
      @click="goSearch"
    >
      <i class="iconfont"> &#xe694;</i>
      <span>请输入游戏名称</span>
    </div>
    <div class="kefu">
      <i class="iconfont">&#xe6b1;</i>
    </div>
  </header>
</template>

<script>
export default {
  methods: {
    goSearch() {
      this.$router.push("search");
    },
  },
};
</script>
<style scoped>
* {
  margin: 0px;
  padding: 0px;
}
.iconfont {
  font-family: "iconfont" !important; /* !important */
  font-size: 23px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
header {
  /* 固定的定位 */
  /*
  下一步了解这两个的区别   
  display: flex;
  position: fixed;
  */
  display: flex;
  position: fixed;
  margin: 0;
  padding: 0;
  justify-content: space-around; /* 排列*/
  align-content: center;
  /* 后期调整 
 position: fixed;
  top: 0;
  left: 0; */
  /*   width: 100wh; */
  width: 100%;
  height: 52px;
  background-color: #b0353f;
  border: 0px solid #fff;
}
header h1 {
  border: 0px solid #fff;
  /*   padding-bottom: 5px;
  padding-left: 10px;
  padding-right: 5px;
  width: 70px; */
  width: 20%;
  height: 100%;
}
header h1 img {
  border: 0px solid #fff;
  float: left;
  background-repeat: no-repeat;
  width: 100%;
  height: 100%;
}
header .search {
  /* width: 160px; */
  width: 50%;
  height: 30px;
  display: flex;
  padding-left: 0px;
  align-items: center;
  background-color: #fff;
  border-radius: 12px;
  height: 25px;
  line-height: 25px;
  vertical-align: middle;
  transform: translateY(38%);
}
.search i {
  padding: 0 0.16rem;
  color: #ccc;
}
/* .search span {
  font-size: 0.373333rem;

  color: #ccc;
} */
.kefu i {
  display: inline-block; /* 转为 行内块元素才有高度*/
  padding-top: 5px;
  height: 100%;
  font-size: 0 0.16rem;
  color: #fff;
  font-size: 36px;
}
/* header .kefu {
  /* display: inline; */
/*} */
header .kefu .icon-kefu {
  color: #fff;
  /*   width: 22px;
  height: 22px; */
  align-content: center;
}
header .search .icon-search {
  height: 22px;
  line-height: 22px;
  color: rgb(109, 109, 116);
  padding-right: 3px;
}
header .search span {
  font-size: 18px;
  height: 22px;
  line-height: 22px;
  color: rgb(99, 99, 102);
}

.clearfix:after {
  /*伪元素是行内元素 正常浏览器清除浮动方法*/
  content: "";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}
.clearfix {
  *zoom: 1; /*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/
}
</style>
